<template>
  <div>
    <a-row
      type="flex"
      justify="center"
      :style="{'align-content': 'center','background-color':'#245590','height': winHeight}">
      <div style="margin-left:3%;margin-top: 6%; margin-bottom: 5%; border-radius: 0%;background-color: rgb(36, 85, 144); padding: 0 0 0 0; width:21%;height:42%;">
        <div style="margin-left:0%;margin-top: 0%; margin-bottom: 5%; border-radius: 5%;background-color: rgb(180, 180, 100); padding: 0 0 0 0; width:100%;height:89%;">
          <div style="font-weight: bold; font-size: 100%; color: black;margin-left:9%;position:relative;top:9%">
            通知
          </div>
          <div style="font-size: 100%; color:black; margin-left:9%; margin-right:9%; position:relative; top:15%; ">
            NFTMgmt是NFT相关的管理系统，请通过手机端进行账号注册。
          </div>
          <div style="font-size: 100%; color:black; margin-left:9%; margin-right:9%; position:relative; top:18%; ">
            更多问题请查看常见问题解答，或是直接与我们联系。
          </div>
          <div style="font-size: 100%; color:grey; margin-left:9%; margin-right:9%; position:relative; top:21%; ">
            当前版本: version 0.0.0
          </div>
        </div>
        <div style="margin-left:0%;margin-top: 12%; margin-bottom: 5%; border-radius: 5%;background-color: rgb(100, 140, 195); padding: 0 0 0 0; width:100%;height:89%;">
          <div style="font-weight: bold; font-size: 100%; color: black;margin-left:9%;position:relative;top:9%">
            相关链接
          </div>
          <div style="font-size: 100%; color:blue; margin-left:9%; position:relative; top:15%; text-decoration:underline">
            - 密码修改，请点这里
          </div>
          <div style="font-size: 100%; color:blue; margin-left:9%; position:relative; top:18%; text-decoration:underline">
            - 常见问题解答
          </div>
          <div style="font-size: 100%; color:blue; margin-left:9%; position:relative; top:21%; text-decoration:underline">
            - 问题反馈
          </div>
        </div>

      </div>
      <div style="margin-left: 9%; margin-top: 9%; margin-right: 9%; margin-bottom: 10%;">
        <img src="~@/assets/login.svg" style="height: 300px;" alt="logo">
      </div>
      <div style="margin-left:0%;margin-top: 6%; margin-bottom: 5%; border-radius: 5%;background-color: rgb(235, 235, 235); padding: 45px 36px 0 36px; width:24%;height:80%;">
        <img src="~@/assets/lock.svg" style="height:69px;margin-left:25%" >
        <div style="font-weight: bold; font-size: large; color: black;margin-left:37%;margin-top:3%">
          用户登录
        </div>
        <div class="linewall"></div>
        <div style="margin: 40px 0 10px 0;">
          <a-form
            id="formLogin"
            class="user-layout-login"
            ref="formLogin"
            :form="form"
            @submit="handleSubmit"
          >
            <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 10px;" :message="this.errorMsg" />
            <a-form-item>
              <a-input
                size="large"
                type="text"
                placeholder="用户名"
                v-decorator="[
                  'loginName',
                  {rules: [{ required: true, message: '请输入登录账号', trigger: 'blur' }]}
                ]"
              >
                <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
              </a-input>
            </a-form-item>
            <a-form-item style="margin-top: 30px;">
              <a-input
                size="large"
                type="password"
                autocomplete="false"
                placeholder="密码"
                v-decorator="[
                  'loginPwd',
                  {rules: [{ required: true, message: '请输入登录密码' },
                           { validator: validateLoginPwd, trigger: 'blur' }]}
                ]"
              >
                <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
              </a-input>
            </a-form-item>
            <a-form-item style="margin: 30px 0px 30px 0px;">
              <a-button
                size="large"
                type="primary"
                htmlType="submit"
                class="login-button"
                :loading="state.loginBtn"
                :disabled="state.loginBtn"
              >登录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </a-row>
    <a-row>
    </a-row>
    <reset-pwd-user ref="ttt"></reset-pwd-user>
  </div>
</template>

<script>
import md5 from 'md5'
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
import Web3 from "web3";
import ResetPwdUser from "@/views/basic/modules/user/ResetPwdUser";
// import { kaptcha } from '@/api/system/account'
export default {
  components: { ResetPwdUser },
  // ####################
  data () {
    return {
      loginBtn: false,
      isLoginError: false,
      errorMsg: '用户名或密码错误',
      randomUuid: '',
      imageCode: '',
      form: this.$form.createForm(this),
      state: {},
      winHeight: '',
    }
  },
  created () {
    // const _this = this
    this.winHeight = window.innerHeight - 180 + 'px';
  },
  methods: {
    ...mapActions(['Login', 'Logout']),
    // handler
    // 前端验证登录密码的合法性
    validateLoginPwd (rule, value, callback) {
         return callback() // new code here
 //     const regex = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,}$/
 //     if (regex.test(value)) {
 //       return callback()
 //     } else {
 //       return callback(new Error('大/小写字母，数字，特殊符号四选三，长度至少6位'))
 //     }
    },
    handleTabClick (key) {
    },
    handleSubmit (e) {
      e.preventDefault()
      const {
        form: { validateFields },
        Login
      } = this
      this.loginBtn = true
      validateFields({ force: true }, (err, values) => {
        const _this = this
        if (!err) {
          const loginParams = { ...values }
          //console.log(values.loginName,values.loginPwd)
          this.$root.msgDataPwd = values.loginPwd;
          this.$root.msgDataName = values.loginName;
          console.log("post"+this.$root.msgDataPwd ,this.$root.msgDataName);
          if(values.loginName!=="admin"){
            let res = this.nft2(values.loginName,values.loginPwd)
            console.log(res);
          }
          loginParams.loginPwd = md5(values.loginPwd)
          Login(loginParams)
            .then((res) => this.loginSuccess(res))
            .catch(err => this.requestFailed(err))
            .finally(() => {
              _this.loginBtn = false
            })
        } else {
          setTimeout(() => {
            _this.loginBtn = false
          }, 300)
        }
      })
    },
    loginSuccess (res) {
      if (res.status === 200) {
        this.$router.push({ path: '/' })
        // 延迟 1 秒显示欢迎信息
        setTimeout(() => {
          this.$notification.success({
            message: '欢迎',
            description: `${timeFix()}，欢迎回来`
          })
        }, 200)
      } else {
        this.isLoginError = true
        this.errorMsg = res.message
      }
    },
    requestFailed (err) {
      this.isLoginError = true
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
        duration: 4
      })
    },
    nft2(username, pwd) {
      let sealedpwd = this.$root.web3.sha3(username+ pwd);
      var result = this.$root.myContractInstance.Login(sealedpwd);
      return result
    },
  }
}
</script>

<style lang="less" scoped>
  .linewall{
    padding: 0 20px 0;
    margin: 20px 0;
    line-height:1px;
    border-left-style: solid;
    border-right-style: solid;
    border-top:3px solid;
  }
  .user-layout-login {
    label {
      font-size: 14px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .forge-password {
      font-size: 14px;
    }

    button.login-button {
      padding: 0 15px;
      font-size: 16px;
      background-color: #0a2863;
      height: 40px;
      width: 100%;
      color: #ffffff;
      border-color:black
    }

    .user-login-other {
      text-align: left;
      margin-top: 24px;
      line-height: 22px;

      .item-icon {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #1890ff;
        }
      }

      .register {
        float: right;
      }
    }
  }
</style>
